<template>
	<view>
		<view class="customer_service">
			<view class="avatr">
				<img :src="qiniuUrl+'home_service.png'"></img>	
			</view>
			<view class="info_service">
				<span>{{serviceInfo.service_name}}</span>
				<span>{{serviceInfo.service_desc}}</span>
			</view>
			<button type="default" @click="openService">点我添加</button>
		</view>
		<modal v-if="modalData.show" :showType="modalData.type" :data="serviceData" @close="handlerCloseModal"></modal>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		computed:{
			...mapGetters({qiniuUrl:'qiniuUrl',wechatStatus:'isWechat',serviceInfo:'serviceInfo'})
		},
		data(){
			return{
				modalData:{},
				serviceData:{}
			}
		},
		methods:{
			//联系客服
			openService(){
				if(this.serviceInfo.service_phone!=""){
					this.modalData={ show:true, type:6 }
				}else{
					this.modalData={ show:true, type:4 }
				}
			},
			handlerCloseModal(){
				this.modalData.show=false
			}
		},
		mounted() {
			console.log('serviceInfo',this.serviceInfo)
		}
	}
</script>

<style lang="scss" scoped>
	.customer_service{
		width: 660rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 15rpx 30rpx 15rpx 20rpx;
		margin: 0 auto;
		.avatr{
			line-height: 0;
			img{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				background-color: rgba(0,0,0,.5);
			}
		}
		.info_service{
			width: 325rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			flex-wrap: nowrap;
			margin-left: 20rpx;
			span{
				display: block;
				width: 325rpx;
				height: 42rpx;
				line-height: 42rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				&:nth-child(2){
					height: 37rpx;
					line-height: 37rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 32rpx;
					color: #999999;
					margin-top: 1rpx;
				}
			}
		}
		button{
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 20rpx;
			background-color: #468AFF;
			padding: 0;
			margin-left: 46rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>
